<template>
  <div class="role">
    <el-table  
    
      border='1'
    
    :data="userlist" style="width: 100%">
      <el-table-column fixed prop="id" label="ID" />
      <el-table-column prop="authid" label="author" />
      <el-table-column prop="admin" label="权限" />
      <el-table-column label="用户名" width="200px">
        <template #default="scope">
          <el-tag> {{ scope.row.user }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template #default="scope">
          <el-button type="danger" @click="del(scope.row.id)">删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { GetList } from "api";
export default {
  data() {
    return {
      userlist: [],
    };
  },
  methods: {
    async getlist() {
      const res = await GetList();
      this.userlist = res.data.user;
    },
    del(id) {
      this.userlist = this.userlist.filter((v) => v.id !== id);
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style>
.role {
  border-radius: 7px;
  background-color: #fff;
  padding: 10px 0px 50px 10px;
}
</style>